<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性【文本与图片对齐】</title>
		<!-- 垂直方向对象属性  vertical-align
		     使用方法：1.用于表格中单元格垂直居中
			          2.用于行内元素以及行内块元素的垂直居中
					  【文本图片的垂直居中（对齐）效果】
					   对齐分为四种：基线对齐、顶部对齐
					                居中对齐、底部对齐
					元素种类:快元素、行元素、行内块元素
					块元素特点：独占一行、设置宽高
					行元素特点：一行内显示、不设置宽高
					网页：元素之间嵌套生成
					行元素与块元素可以任意嵌套
					前提：设置宽高---行套块
					             ---块套块  √
								 ---块套行  √
					前提：一行内显示---行套块  √
					               ---块套块  ×
								   ---块套行  √
								   ---行套行  √
		 -->
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套文字： 图片叫什么名字
		                    文字后加img，设定宽高：25~100px
							每个图片后面加：基线对齐、顶部对齐
							居中对齐、顶部对齐
		 -->
		 <h1>文本与垂直属性</h1>
		 <p>文本< img src="img/1.png" alt="哪吒1" width="100px" 
		 height="100px"/>基线对齐</p >
		 <p>文本< img src="img/2.png" alt="太乙真人" width="100px" 
		 height="100px"/>顶部对齐</p >
		 <p>文本< img src="img/3.png" alt="傲丙" width="100px" 
		 height="100px"/>居中对齐</p >
		 <p>文本< img src="img/4.png" alt="哪吒2" width="100px"
		  height="100px"/>底部对齐</p >
		  <!-- css选择器--抓第一张图片 -->
	</body>
</html>